<template>
  <div class="icon-picker-container">
    <el-tabs v-model="activeIcons" v-if="isDataReady">
      <el-tab-pane
        v-for="tab in tabs"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
      >
        <div class="icon-picker-box">
          <div
            v-for="icon in tab.icons"
            :key="icon.id"
            class="icon-picker-item"
            :class="{ 'icon-picker-item-active': value === icon.unicode }"
          >
            <i
              :class="icon.class"
              class="iconfont font-size-18"
              @click="select(icon.unicode)"
            ></i>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import iconfont from '@/assets/font/iconfont.json';

  export default {
    name: 'IconPicker',
    model: {
      event: 'change'
    },
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        tabs: [],
        activeIcons: 'first',
        isDataReady: false
      };
    },
    watch: {
      value(newValue) {
        this.updateActiveTab(newValue);
      }
    },
    mounted() {
      // 处理数据后动态更新 tabs 配置
    this.loadTabs();
    },
    methods: {
      loadTabs() {
        this.tabs = [
          { label: '编辑', name: 'first', icons: iconfont.editor.map(icon => this.formatIcon(icon)) },
          { label: '功能', name: 'second', icons: iconfont.functions_icons.map(icon => this.formatIcon(icon)) },
          { label: '设备', name: 'third', icons: iconfont.device_icons.map(icon => this.formatIcon(icon)) },
          { label: '基础', name: 'fourth', icons: iconfont.base_icons.map(icon => this.formatIcon(icon)) },
        ];
        this.isDataReady = true;
        this.updateActiveTab(this.value); // 初始化时根据 value 设置 activeIcons
      },
      // 提取公共格式化方法
      formatIcon(icon) {
        const {icon_id, name, font_class, unicode} = icon
        return {
          id: icon_id,
          name: name,
          class: `icon-${font_class}`,
          unicode: unicode
        }
      },
      select(unicode) {
        this.$emit('change', this.value === unicode ? '' : unicode);
      },
      updateActiveTab(unicode) {
        for (const tab of this.tabs) {
          if (tab.icons.some(icon => icon.unicode === unicode)) {
            this.activeIcons = tab.name;
            break;
          }
        }
      },
    }
  };
</script>

<style scoped lang="less">
  .icon-picker-container {

    .icon-picker-box {
      display: flex;
      justify-content: flex-start;
      gap: 5px;
      flex-wrap: wrap;
      max-height: 350px;
      overflow: auto;

      .icon-picker-item {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: 5px;
        margin: 5px;
        border: 1px @colorGray90 solid;
        font-size: 20px;
      }

      .icon-picker-item-active {
        border: 1px @colorPrimary solid;
        color: @colorPrimary;
        font-weight: bold;
      }

    }
  }
</style>
